<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    1. GLSL: 着色器语言
        变量声明： 
            存储变量类型 （修饰符）：
                                attribute (属性修饰符)
                                uniform(全局变量修饰符)
                                varying (可变变量修饰符)  ---》 顶点着色器与片元着色器共有的变量
            数据类型：
                vec2  --》 两个分量的浮点型数据
                vec3   --》 三个分量
                vec4  --》 四个分量  第四位代表其次坐标分量 (0.5, 1, 1, 1);
            precision
                highp: 高精准度
                midiump ： 中精准度
                lowp: 低精准度
        顶点着色器中的内置变量：
            gl_Position,
            gl_PointSize 
        片元着色器中的内置变量
            gl_fragColor片元颜色
    
        坐标转换：
            通过canvas的坐标计算webgl的坐标
        坐标轴：
            webgl坐标系   原点在canvas 的中心点  水平方向（从左到右 x轴） -1 -- 1  竖直方向（从下到上 Y轴） -1 -- 1  垂直于页面向里为z轴
            canvas坐标系  原点在canvas的左上角  水平向右为x正轴 竖直向下为y轴正轴 垂直页面向上为z轴
            纹理坐标系    原点在图片的左下角  水平向右为正轴 图片宽度为1   竖直向上为y轴 图片高度为1

        WebGL api
        着色器 shader：
            gl.createShader(type) 创建着色器对象  type为着色器类型  type: gl.VERTEX_SHADER, gl.FRAGMENT_SHADER
            gl.shaderSource(shader, source); 为着色器添加数据源  shader 着色器对象  source 数据源即我们写的着色器代码
            gl.compileShader(shader); 编译着色器  将字符串编辑成着色器语言
            gl.getShaderParameter(shader, gl.COMPILE_STATUS);  返回编译着色器的成功状态  返回值为true/ false
            gl.getShaderInfoLog(shader)  返回着色器代码的错误日志
        程序program:
            gl.createProgram();创建程序
            gl.attachShader(program, shader);  添加着色器  program：程序   shader要往程序里面添加的着色器对象
            gl.linkProgram(program); 链接着色器程序
            gl.useProgram(program);使用着色器
        attribute属性
            gl.getAttribLocation(program, "a_position");
        uniform属性
            gl.getUniformLocation(program, "a_position");
            gl.uniform4f(location, x,y,z,w);
            gl.uniformMatrix4fv(loaction, false, matrix);
        缓冲区数据
            gl.createBuffer(); 创建缓冲区
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 绑定缓冲区对象
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([]), gl.STATIC_DRAW);  绑定数据
            gl.vertexAttribPointer(location, size, type, normalize, stride, offset) ;为变量添加数据
            gl.enableVertexAttribArray(location);   

        绘制
            gl.drawArrays(gl.TRIANGLE_FAN, 0, 6)
            gl.drawElements(gl.TRIANGLES, cone.indices.length, gl.UNSIGNED_SHORT, 0);
        图元： 
            gl.POINTS
            gl.LINES    LINE_STRIP    LINE_LOOP
            gl.TRAINGLES   TRIANGLE_FAN  TRIANGLE_STRIP
        纹理：
            gl.createTexture()创建纹理对象
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); 转换坐标系
            gl.activeTexture(gl.TEXTURE0);激活纹理单元
            gl.bindTexture(gl.TEXTURE_2D, texture); 绑定纹理对象
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);设置纹理参数
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE ,img); 将图片数据传递给GPU
            gl.uniform1i(location, 0);  传递纹理数据  传递纹理单元索引
        
        
</body>
</html>
